<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/layui.css">
  <script src="layui.js"></script>
</head>

<body>
  <div id="test1"></div>

  <script>
    layui.use('transfer', function () {
      var transfer = layui.transfer;
      var $ = layui.$;
      //从后台获取数据
      $.post(
        "http://stuapi.ysdjypt.com/api/GetRolesByUserIdLayUI"
        , {
          uid: "c8033529-c2f7-4b32-877f-06004f05f7fe"
          , token: "ff8437b3-a8af-436f-8ba6-15adfb088bfe"//数据库密钥
        }, function (res) {
          console.log(res.data);
          var valueArr = new Array;//右侧列表数据集合
          for (var i = 0; i < res.data.length; i++) {
            // console.log(res.data[i].Id);
            valueArr.push(res.data[i].Id);
          }
          //console.log(valueArr);
          $.post(
            "http://stuapi.ysdjypt.com/api/GetRolesAll"
            , {
              token: "ff8437b3-a8af-436f-8ba6-15adfb088bfe"//数据库密钥
            }, function (res) {
              console.log(res);
              //渲染
              transfer.render({
                elem: '#test1'  //绑定元素
                , title: ["系统角色", "拥有角色"]
                , data: res
                , value: valueArr//右侧初始数据
                , id: 'demo1' //定义索引
                , parseData: function (res) {
                  return {
                    "value": res.Id //数据值
                    , "title": res.Name //数据标题
                    , "disabled": res.disabled  //是否禁用
                    , "checked": res.checked //是否选中
                  }
                }, onchange: function (data, index) {
                  console.log(data); //得到当前被穿梭的数据
                  console.log(index); //如果数据来自左边，index 为 0，否则为 1
                  if(index==0){//左传到右，分配
                    for(var i=0;i<data.length;i++){
                      $.post(
                        "http://stuapi.ysdjypt.com/api/AddUserToRole"
                        ,{
                          uId: "c8033529-c2f7-4b32-877f-06004f05f7fe"
                          ,rId:data[i].value
                          ,token: "ff8437b3-a8af-436f-8ba6-15adfb088bfe"//数据库密钥
      
                        },function(res){
      
                        },'json'
      
                      );
  
                      
                    }
                  }else{//右传到左，移除
                      for(var i=0;i<data.length;i++){
                        $.post(
                          "http://stuapi.ysdjypt.com/api/RemoveUserFromRole"
                          ,{
                            uId: "c8033529-c2f7-4b32-877f-06004f05f7fe"
                            ,rId:data[i].value
                            ,token: "ff8437b3-a8af-436f-8ba6-15adfb088bfe"//数据库密钥
        
                          },function(res){
        
                          },'json'
        
                        );
    
                        
                      }

                    }
                
                }
              });
            }, 'json');



        }, 'json');








    });
  </script>
</body>

</html>